<template>
  <div>
    <el-container>
      <el-header>
        <ShopcarHeader>
          <span slot="header">京东登录注册</span>
        </ShopcarHeader>
      </el-header>
      <el-main>
        <i class="el-icon-s-custom"></i>
        <el-input placeholder="请输入账号" v-model="username" clearable></el-input>
        <el-input placeholder="请输入密码" v-model="password" show-password></el-input>
        <el-button type="danger" round @click="login">登录</el-button>
      </el-main>
      <el-footer>
        <FooterBox></FooterBox>
      </el-footer>
    </el-container>
  </div>
</template>
  
  <script>
import FooterBox from "../components/FooterBox";
import ShopcarHeader from "../components/ShopcarHeader";
import axios from "axios";
export default {
  name: "Login",
  components: {
    FooterBox,
    ShopcarHeader
  },
  data() {
    return {
      username: "",
      password: ""
    };
  },
  //10.
  methods: {
    async login() {
      if (this.username != "" && this.password != "") {
        try {
          const loginResult = await axios.post("/login", {
            username: this.username,
            password: this.password
          });
          // .then(res => {
          if (
            (loginResult.data == "登录成功" ||
              loginResult.data == "注册并登录成功") &&
            document.cookie != ""
          ) {
            this.$router.push({
              path: "/my"
            });
            this.$message({
              message: loginResult.data,
              center: true,
              showClose: true,
              type: "success"
            });
          } else {
            this.$message({
              message: loginResult.data,
              center: true,
              showClose: true,
              type: "error"
            });
          }
          // });
        } catch (error) {
          this.$message({
            message: error,
            center: true,
            showClose: true,
            type: "error"
          });
        }
      } else {
        this.$message({
          message: "请输入账号密码",
          center: true,
          showClose: true,
          type: "warning"
        });
      }
    }
  }
};
</script>
  
  <style lang="less" scoped>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body,
html {
  width: 100%;
  height: 100%;
}
a {
  color: black;
  text-decoration: none;
}
li {
  list-style: none;
}
.el-header {
  width: 100vw;
  height: 11.7333vw !important;
  background-color: #fff;
}
.el-footer {
  width: 100%;
  height: 13.3333vw !important;
}
span {
  font-size: 4.5333vw;
  color: red;
}
.el-container {
  display: flex;
  height: 177.867vw !important;
}
.el-main {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  flex-grow: 1;
}
.el-input {
  width: 85%;
}
/deep/ .el-input__inner {
  margin-top: 5.3333vw;
  border-color: transparent;
  border-bottom: 1px solid #efefef;
  font-size: 4.2666vw;
}
.el-icon-s-custom {
  font-size: 26.6666vw;
}
.el-icon-s-custom::before {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 120%;
  height: 120%;
  background-color: #efefef;
  border-radius: 50%;
}
.el-button {
  margin-top: 8vw;
  width: 85%;
  height: 13.3333vw;
  border-radius: 6.6666vw;
}
/deep/ .el-input__icon {
  position: absolute;
  top: 2.6666vw;
  left: -6.9333vw;
  font-size: 5.3333vw;
}
</style>